{{template "admin/header.html"}}
<title>登录 - GPRESS</title>
<script type="text/javascript" src="{{basePath}}admin/js/sha3.min.js"></script>
<style>
	.gpress-login-container {
		padding: 0 20px;
		width: 450px;
		height: auto;
		/* 定位方式 */
		position: absolute;
		/* 距顶部的百分比值，表示向下移动自身高度的一半 */
		top: 45%;
		/* 距左侧的百分比值，表示向右移动自身宽度的一半 */
		left: 50%;
		/* 通过变换函数将其自身的尺寸的一半作为参数传入，从而达到居中效果 */
		transform: translate(-50%, -50%);
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		box-sizing: border-box;
		background: #fff;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		box-shadow: 0 0 30px rgba(0, 0, 0, 0.5)
	}

	.login_logo {
		margin: -55px auto 20px;
		width: 100px;
		height: 100px;
		background: #fff;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		border-radius: 50%;
		border: 5px solid #fff;
		overflow: hidden;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	}

	.login_logo img {
		width: 100%;
	}

	.gpress-login-other {
		padding: 0;
		width: 100%;
		text-align: center;
		margin-top: 15px;
		margin-bottom: 15px;
	}

	.gpress-login-other a {
		margin-right: 15px;
		margin-left: 15px;
		text-decoration: underline;
	}
</style>
</head>

<body>
	<div class="gpress-login-container">
		<input type="hidden" id="message" value="{{.message}}">
		<div class="login_logo"><img src="{{basePath}}public/logo.png"></div>
		<div><h2 class="gpress-login-other">登录</h2></div>
		<form class="layui-form" action="{{basePath}}admin/login" method="post">
			<div class="layui-form-item">
				<div class="layui-input-wrap">
					<div class="layui-input-prefix">
						<i class="layui-icon layui-icon-username"></i>
					</div>
					<input type="text" name="account" value="" lay-verify="required" placeholder="账 户"
						lay-reqtext="请填写账户" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-wrap">
					<div class="layui-input-prefix">
						<i class="layui-icon layui-icon-password"></i>
					</div>
					<input type="password" id="password" name="password" value="" lay-verify="required"
						placeholder="密   码" lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
				</div>
			</div>

			{{ if .showCaptcha }}
			<div class="layui-form-item">
				<div class="layui-input-wrap" style="display: flex;justify-content: space-between;align-items: center;">
					<div class="layui-input-prefix">
						<i class="layui-icon layui-icon-vercode"></i>
					</div>
					<input type="text" name="answer" value="" lay-verify="required" placeholder="验证码" lay-reqtext="请填写验证码"
						autocomplete="off" class="layui-input">
						&nbsp; <img height="38px" src="{{ safeURL .captchaBase64 }}" />
				</div>
			</div>
			{{ end }}

			<div class="layui-form-item">
				<button class="layui-btn layui-btn-fluid  layui-bg-blue" lay-submit
					lay-filter="gpress-login">登录</button>
			</div>
		</form>
		<div class="gpress-login-other">
			<a href="{{basePath}}admin/chainlogin">区块链登录</a>
			<a href="javascript:retrievepassword();">忘记密码</a>
			<a href="https://gitee.com/gpress/gpress" target="_blank">联系我们</a>
		</div>
	</div>
	<script>
		var layer;
		layui.use(function () {
			var form = layui.form;
			layer = layui.layer;
			//消息提示
			let msg = document.getElementById('message').value;
			if (msg) {
				layer.msg(msg);
			}
			// 提交事件
			form.on('submit(gpress-login)', function (data) {
				document.getElementById('password').value = sha3_512(document.getElementById('password').value);
				return true; // 提交form
			});


		});

		// 忘记密码
		function retrievepassword(){
			layer.alert(' 1.重命名 gpressdatadir/template/install.html.bak 为 install.html </br> 2.重启gpress,重新安装初始化管理员账号密码,数据不会丢失.',{title:"忘记密码"});
		}
	</script>

</body>

</html>